<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<style>
    .yanglaoban {
        font-size: 30px;
        color: red
    }
</style>

<body>
    <div id="box"></div>
    <div id="box1"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 提供了操作DOM的react扩展库 -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 解析jsx语法的代码转换为js语法 -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <script type="text/babel">
        /* react声明周期分为三个阶段 挂载 更新（渲染） 卸载 */
        class Component1 extends React.Component {
            constructor(props) {
                super(props);
                this.state={
                    info:'react18'
                }
               
            }
            //WARNING! To be deprecated in React v17. Use componentDidMount instead.
            componentWillMount() {
                console.log('componentWillMount');
                // 在声明周期钩子函数中this是当前的组件对象
                console.log(this.state.info);
                console.log(this.props.msg);
                console.log(this.handlejump);
            }
            handlejump(){
                console.log('跳吧！')
            }
            componentDidMount() {
                console.log('componentDidMount');
            }
            changeInfo(){
                this.setState({
                    info:'react17'
                })
            }
            componentWillUpdate(nextProps, nextState) {
                console.log('componentWillUpdate');
                console.log(nextState);
            }
            componentDidUpdate(prevProps, prevState) {
            console.log('componentDidUpdate');
                console.log( prevState);
        }    
        removeComponent(){
            // console.log(document.getElementById('box1'));
            // 将组价移除
            ReactDOM.unmountComponentAtNode(document.getElementById('box'))
        }
            render() {
                return (
                    <div>
                       <h1>声明周期钩子函数</h1>
                       <h2>{this.state.info}</h2>
                       <button onClick={this.changeInfo.bind(this)}>change info</button>
                       <div id='box1'>
                            <ComponentSon info={this.state.info}/>
                       </div>
                       <button onClick={this.removeComponent.bind(this)}>卸载组件</button>
                    </div>
                );
            }
    }
    // 子组件
    class ComponentSon extends React.Component {
        constructor(props){
            super(props);
        }
        componentWillUpdate(nextProps, nextState) {
                console.log('componentWillUpdate');
                console.log(nextProps);
            }
        componentDidUpdate(prevProps, prevState) {
            console.log('componentDidUpdate');
                console.log(prevProps);
        }   
        componentWillUnmount() {
            console.log('componentWillUnmount');
        }
        //WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
        componentWillReceiveProps(nextProps) {
            console.log('componentWillReceiveProps');
            console.log(nextProps);
        }
        shouldComponentUpdate(nextProps, nextState) {
            console.log('shouldComponentUpdate');
            console.log(nextProps);
        }
        
        render(){
            return (
                <div>
                    <h1>我是子组件</h1>
                    <h2>{this.props.info}</h2>
                </div>
            )
        }
    }


    ReactDOM.render(<Component1 msg='张栋把侯邦气的要跳楼，你们赶紧劝一劝别跳'/>, document.getElementById("box"));
    /* 
    1. constructor 初始化数据 state props
    2.componentWillMount state和props,函数初始化完成，但是没有渲染DOM
    3. render 讲过jsx生产的DOM结构，生成一份虚拟DOM，变为真实DOM  通过diff算法比较新旧DOM树，找打最小差异的DOM节点，并重新渲染。
    4. componentDidMount 组件完成第一次渲染，生成了DOM节点，发送ajax请求
    5. componentWillUpdate  组件更新 state props发变换时会触发 nextProps, nextState是更改之后的值。
    6. componentDidUpdate  组件更新之后触发 prevProps, prevState 是旧值
    7. componentWillUnmount 完成组件卸载之后触发 数据销毁   清除定时器 移除所有的事件监听
    8. componentWillReceiveProps props值更新之后触发

     */

   
</script>
</body>

</html>